<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>KPI</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">

<!-- Le styles -->
<link href="static/bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="static/bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
<style type="text/css">
body {
	padding: 40px 0 0;
}
</style>
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
	<script src="static/scripts/html5.js"></script>
<![endif]-->

<!-- Le fav and touch icons -->
</head>
<body>
	<div class="container">
	<div id="holder"></div>
	</div>
	<!-- Le javascript
    ================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->
	<script src="static/scripts/jquery-1.8.2.js"></script>
	<script src="static/scripts/raphael-min.js"></script>
	<script src="static/scripts/popup.js"></script>
	<script src="static/bootstrap/js/bootstrap.js"></script>
	<script type="text/javascript">
		Raphael.fn.drawGrid = function(x, y, w, h, wv, hv, color) {
			color = color || "#000";
			var path = [ "M", Math.round(x) + .5, Math.round(y) + .5, "L",
					Math.round(x + w) + .5, Math.round(y) + .5,
					Math.round(x + w) + .5, Math.round(y + h) + .5,
					Math.round(x) + .5, Math.round(y + h) + .5,
					Math.round(x) + .5, Math.round(y) + .5 ], rowHeight = h
					/ hv, columnWidth = w / wv;
			for ( var i = 1; i < hv; i++) {
				path = path.concat([ "M", Math.round(x) + .5,
						Math.round(y + i * rowHeight) + .5, "H",
						Math.round(x + w) + .5 ]);
			}
			for (i = 1; i < wv; i++) {
				path = path.concat([ "M", Math.round(x + i * columnWidth) + .5,
						Math.round(y) + .5, "V", Math.round(y + h) + .5 ]);
			}
			return this.path(path.join(",")).attr({
				stroke : color,
				'stroke-dasharray' : '- ',
				'stroke-width' : 0.5
			});
		};

		window.onload = function() {
			// Grab the data
			var labels = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19], data = [9,1,7,34,25,67,54,44,33,24,76,93,25,26,34,56,90,22,7];

			// Draw
			var width = 800, height = 250, leftgutter = 20, rightgutter=20, bottomgutter = 20, topgutter = 20, colorhue = .6 || Math
					.random(), color = "hsl(" + [ colorhue, .5, .5 ] + ")", r = Raphael(
					"holder", width, height), txt = {
				font : '12px Helvetica, Arial',
				fill : "#000"
			}, txt1 = {
				font : '10px Helvetica, Arial',
				fill : "#000"
			}, txt2 = {
				font : '12px Helvetica, Arial',
				fill : "#000"
			}, X = (width - leftgutter - rightgutter) / labels.length, max = Math.max.apply(
					Math, data), Y = (height - bottomgutter - topgutter) / max;
			r.drawGrid(leftgutter + X * .5 + .5, topgutter + .5, width
					- leftgutter - rightgutter - X, height - topgutter - bottomgutter, 10,
					10, "#000");
			var border = r.path().attr({
				stroke : color,
				"stroke-width" : 1,
				"stroke-linejoin" : "round",
				path : [ 'M', 0, 0, 'L', 0, 250, 800, 250, 800, 0, 0, 0 ]
			});
			var path = r.path().attr({
				stroke : color,
				"stroke-width" : 0.5,
				"stroke-linejoin" : "round"
			}), bgp = r.path().attr({
				stroke : "none",
				opacity : .3,
				fill : color
			}), lx = 0, ly = 0, blanket = r.set();

			var p, bgpp;
			for ( var i = 0, ii = labels.length; i < ii; i++) {
				var y = Math.round(height - bottomgutter - Y * data[i]), x = Math
						.round(leftgutter + X * (i + .5)), t = r.text(x,
						height - 6, labels[i]).attr(txt).toBack();
				if (!i) {
					p = [ "M", x, y ];
					bgpp = [ "M", leftgutter + X * .5, height - bottomgutter,
							"L", x, y ];
				}
				if (i && i < ii - 1) {
					p = p.concat([ x, y ]);
					bgpp = bgpp.concat([ x, y ]);
				}
				blanket.push(r.rect(leftgutter + X * i, 0, X, height - bottomgutter).attr({
					stroke : "none",
					fill : "#fff",
					opacity : 0
				}));
			}
			p = p.concat([ x, y, x, y ]);
			bgpp = bgpp
					.concat([ x, y, x, y, "L", x, height - bottomgutter, "z" ]);
			path.attr({
				path : p
			});
			bgp.attr({
				path : bgpp
			});
			blanket.toFront();
		};
	</script>
</body>
</html>

